<template>
  <el-container>
    <el-header>
      <div style="float:right" >
        <el-tooltip class="item" effect="dark" content="我的优坊" placement="bottom" open-delay=500>
        <el-button plain icon="el-icon-user" circle style="border:none;width:30px"></el-button></el-tooltip>
        
      </div>
      <div style="float:right" >
        <el-tooltip class="item" effect="dark" content="我的购物袋" placement="bottom" open-delay=500>
        <el-button plain icon="el-icon-goods" circle style="border:none"></el-button></el-tooltip>
      </div>
      <div class="head">
          <img style="width: 111.6px; height: 60px"
              src="../images/logo.jpg"/>
        <div>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            style="display:inline-block;border:none"
          >
            <el-submenu index="1">
              <template slot="title">精选</template>
              <el-menu-item index="1-1" route-link:to='/Card' @click="tiao">薯片</el-menu-item>
              <el-menu-item index="1-2">虾条</el-menu-item>
              <el-menu-item index="1-3">果冻</el-menu-item>
              <el-submenu index="1-4">
                <template slot="title">饮料</template>
                <el-menu-item index="1-4-1" >可口可乐</el-menu-item>
                <el-menu-item index="1-4-2">美年达</el-menu-item>
                <el-menu-item index="1-4-3">红牛</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">零食类型</template>
              <el-menu-item index="2-1" route-link:to='/Card' @click="tiao">辣条</el-menu-item>
              <el-menu-item index="2-2">面包</el-menu-item>
              <el-menu-item index="2-3">牛奶</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">水果</template>
                <el-menu-item index="2-4-1" >香蕉</el-menu-item>
                <el-menu-item index="2-4-2">西瓜</el-menu-item>
                <el-menu-item index="2-4-3">提子</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">新品系列</template>
              <el-submenu index="3-1">
                <template slot="title">水果</template>
                <el-menu-item index="3-1-1" >香蕉</el-menu-item>
                <el-menu-item index="3-1-2">西瓜</el-menu-item>
                <el-menu-item index="3-1-3">提子</el-menu-item>
              </el-submenu>
              <el-menu-item index="3-2">面包</el-menu-item>
              <el-menu-item index="3-3">牛奶</el-menu-item>
              <el-submenu index="3-4">
                <template slot="title">干果</template>
                <el-menu-item index="3-4-1" >香蕉干</el-menu-item>
                <el-menu-item index="3-4-2">猕猴桃干</el-menu-item>
                
              </el-submenu>
            </el-submenu>
            <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
            <el-submenu index="4">
              <template slot="title">订单详情</template>
              <el-menu-item index="4-1" route-link:to='/Card' @click="tiao">已购订单</el-menu-item>
              <el-menu-item index="4-2">待付款订单</el-menu-item>
              <el-menu-item index="4-3">待收货订单</el-menu-item>
              
            </el-submenu>
          </el-menu>
        </div>
        <div style="float:right"><el-button plain icon="el-icon-search" circle style="border:none"></el-button></div>
        <div style="float:right">
          <el-input
            placeholder="搜索建议：中秋礼盒"
            v-model="input1">
          </el-input>  
        </div>  
      </div>
          
    </el-header>
    <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 6px;
          opacity: 0.4;
        "></div>
        <div class="jj">
          <div
        style="
          height: 1px;
          background-color: white;
          margin-top: 6px;
          opacity: 0.4;
        "></div>
          <label for="">零食</label>
        </div>
    <!-- <el-main> -->
      <!-- <div>
        <el-carousel indicator-position="none" height="400px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div> -->
      <!-- 1111      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div> -->
      <!-- <div style="height: 1000px; display: flex">
        <div style="flex: 1; float: left; border-right: 1px solid lightgray">
          1
        </div>
        <div class="rightgoods" style="flex: 1; float: left">
          2
          <div style="border-bottom: 1px solid lightgrey"></div>
          <div>3</div>
        </div>
      </div> -->
      <!-- <div style="height: 0.8px; background-color: grey; opacity: 0.3"></div>
      <div class="parent">
        <div class="dleftgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
        </div>
        <div class="dmidgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
        </div>
        <div class="drightgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
              </div>      
      </div>

      <div class="parent">
        <div class="dleftgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
        </div>
        <div class="dmidgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
        </div>
        <div class="drightgoods">
          <img style="width: 300px; height: 200px"
              src="../images/logo.jpg"/>
              </div>      
      </div>
    </el-main> -->
    <el-row :gutter="20">
      <!-- <div
        style="
          height: 1px;
          background-color:  white;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div> -->
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food1.jpg"/>
              
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food2.jpg"/>
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food3.jpg"/>
    </div></el-col>
  
</el-row>
<el-row :gutter="20">
      <!-- <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div> -->
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food4.jpg"/>
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food5.jpg"/>
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <img style="width: 545px; height: 400px"
              src="../images/food6.jpg"/>
    </div></el-col>
  
</el-row>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      table: false,
    };
  },
  methods:{
  
  tiao(){
    this.$router.push({path:'/Cart'})
  }
}

};

</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head{
  display: fixed;
  height: 60px;
  text-align: left;
}
.head>div{
  float: left;
}
.head img{
  float: left;
  padding: 0;
  margin: 0;
}
.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
.jj{
  height: 50px;
  
}



.el-row {
  
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    
    border-radius: 4px;
  }
  .bg-purple-dark {
    
    background: #99a9bf;
  }
  .bg-purple {
    height: 400px;
    background: #d3dce6;
  }
  .bg-purple-light {
    
    background: #e5e9f2;
  }
  .grid-content {
    
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
